<template>
    <view>
        <!-- components/radioPopup/index.wxml -->
        <van-popup :show="showClone" position="bottom" round @close="onCloseFun" @after-leave="afterLeaveFun">
            <view>
                <view class="title">
                    <text>请选择</text>
                    <van-icon custom-class="close_icon" class-prefix="iconfont" name="danchuangguanbi" size="28rpx" color="#999999" @tap.native="onCloseFun"></van-icon>
                </view>

                <van-radio-group :value="checkedIndexClone" @change="onChangeFun">
                    <view class="section_item" v-for="(item, index) in sections" :key="index">
                        <van-radio :name="index" checked-color="#3CBB2F" label-position="left">
                            <view class="section_text">
                                {{ item.itemName }}
                            </view>
                        </van-radio>
                    </view>
                </van-radio-group>
            </view>
        </van-popup>
    </view>
</template>

<script>
// components/radioPopup/index.js
export default {
    data() {
        return {
            showClone: false,
            checkedIndexClone: ''
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        checkedIndex: {
            type: Number,
            default: -1
        },
        sections: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        onCloseFun() {
            this.setData({
                showClone: false
            });
        },
        onChangeFun(event) {
            this.setData({
                showClone: false,
                checkedIndexClone: event.detail
            });
            this.$emit('onRadioChecked', {
                detail: event.detail
            });
        },
        afterLeaveFun() {
            this.setData({
                checkedIndexClone: -1
            });
        }
    },
    created: function () {},
    watch: {
        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        },

        checkedIndex: {
            handler: function (newVal, oldVal) {
                this.checkedIndexClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
